<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动练习</title>
		<style>
			.contain{
				border: solid 1px red;
				overflow: auto;
				img{
					width: 230px;
					border-radius: 15px;
				}
			}
			.hoper {
				width: 230px;
				border: solid 1px #9e9e9e;
				border-radius: 15px;
				text-align: center;
				padding: 12px 12px 30px 12px;
				float: left;
				margin: 11px;
				p{
					font-size: 16px;
					font-weight: bold;
				}
				span{
					color: red;
					font-size: 12px;
				}
			}
			
			img:hover {
				font-size: 16px;
				transition: 0.5s;
			}
		</style>
	</head>
	<body>
		<div class="contain">
			<div class="hoper">
				<img src="img/1.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/2.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/a.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/a2.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/b1.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/b2.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/b3.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/b4.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/b5.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-1.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-2.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-3.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-8.png" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-2.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-6.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-1.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/天猫国际-right-8.png" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
			<div class="hoper">
				<img src="img/1.jpg" alt="123" />
				<p>三国刘备</p>
				<span>68.0</span>
			</div>
		</div>
	</body>
</html>